<template>
	<view class="content">
		<!-- <view class="page-status" :style="[{'paddingTop': statusBarHeight  + 'px'}]" style="background: linear-gradient(3deg, #FCC0AB, #FF4F10); height: 450upx; "> -->
		<!-- <view class="page-status" :style="[{'paddingTop': statusBarHeight  + 'px'}]" style="height: 450upx; ">
			<view :style="{height: titleBarHeight + 'px', width: 100 + '%', 
			lineHeight: titleBarHeight + 'px', 'marginTop': statusBarHeight  + 'px'}" 
			style="text-align: center; position: absolute; top: 0upx;" >
				口留香新零售
			</view>
		</view> -->
		
		<!-- <view style="height: 344upx;background: linear-gradient(3deg, #FCC0AB, #FF8A60);"></view> -->
		<view>
			<!-- <mescroll-body  ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" > -->
				<!-- <mescroll-body  ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :up="upOption" :down="downOption"> -->
				<!-- <view style="width: 700upx; margin: 0 auto;">
					<u-search color="#FFFFFF" :action-style="{'color': '#FFFFFF'}" 
					@blur="shoaaction = false" @focus="shoaactionChoose" placeholder="搜索关键字"
					@custom="getfightGroupsHome"
					 v-model="keyword" search-icon-color="#FFFFFF"
						placeholder-color="#ffffff" :show-action="shoaaction" bg-color="#FF9F7D"
						:input-style="{'fontSize': '24' + 'upx', 'width': 700 + 'upx'}" style="width: 700upx;
				  margin-top: 30upx; margin: 0 auto;"></u-search>
				</view> -->
				<view class="swiperlist">
					<!-- <view class="box"> -->
						<u-swiper height="350" :list="swiperlist" name="thumb"></u-swiper>
					<!-- </view> -->
				</view>
				<view class="video">
					<video style="height: 432rpx;width: 750rpx;" :autoplay="false" src="https://kouliuxiang.gdxuanbao.com/static/upload/videos/4/2022/02/uS0XXn2mnOMm0uosuSPeMMm0Vx2U52.mp4" controls></video>
				</view>
				<public-module></public-module>
				<view class="tabArr" >
					<view class="tabItem" @click="junit('/pages/prefile/my-collage/my-collage', {type: 0})">
						<image src="../../static/images/index/item1.png" mode=""></image>
						<text>我的拼团</text>
					</view>
					<view class="tabItem" @click="junit('/pages/prefile/my-extension/my-team/my-team')">
						<image src="../../static/images/index/item2.png" mode=""></image>
						<text>我的团队</text>
					</view>
					<view class="tabItem" @click="junit('/pages/prefile/my-extension/my-extension')">
						<image src="../../static/images/index/item3.png" mode=""></image>
						<text>我的业绩</text>
					</view>
					<view class="tabItem" @click="junit('/pages/prefile/my-balance/my-balance')">
						<image src="../../static/images/index/item4.png" mode=""></image>
						<text>红包明细</text>
					</view>
				</view>
				
				<!-- 中奖信息 -->
				<!-- <view class="page-section-spacing">
					<swiper :circular="true" class="swiper" :indicator-dots="false" :duration="500">
						<swiper-item v-for="(item, index) in fightGroups" :key="index">
							<view class="swiper-item acion-swiper">
								<view class="biping-box-top">
									<image class="tips-title" style="" src="../../static/images/index/biping.png"></image>
									<view class="user-info text-line1" style="width: 300upx; text-align: right;">
										<image src="../../static/images/tabbar/hot-group-select.png"></image>
										<text>喜中{{item.has_one_goods.title}} </text>
									</view>
								</view>
								<view class="goods-box">
									<view class="goods-info">
										<view class="goods-img">
											<image :src="item.has_one_goods.thumb"></image>
										</view>
			
										<view class="goods-detail">
											<view class="goods-name text-line2">{{item.title}} </view>
											<view class="tips" style="color: #FF5E24; font-size: 22upx;">
												{{item.fight_describe}}
											</view>
											<view style="display: flex; align-items: center; margin-top: 3upx;">
												<view style="flex: 1;">
													<u-line-progress height="10" style="height: 11upx; width: 326upx;"
														active-color="#FF4F10"
														:percent="(item.ba_team.has_many_success_member_count/ item.has_many_option_levels[0]['member_num']) * 100"
														:show-percent="false"></u-line-progress>
												</view>
												<view
													style="font-size: 22upx; color: #E5E5E5; margin-left: 16upx; padding-top: 15upx;">
													<text
														style="color: #FF5E24;">{{item.ba_team.has_many_success_member_count}}
													</text> /{{item.has_many_option_levels[0]['member_num']}}
												</view>
											</view>
											<view class="price-box">
												<view class="price-left">¥{{item.has_many_option_levels[0]['group_price']}}
												</view>
												<view><text style="color: #B2B2B2;">成团：</text>{{item.has_many_team_count}}次
												</view>
											</view>
											<view class="pingtuan"
												@click="junit('/pages/index/goods-detail/goods-detail', {id: item.fight_id});">
												马上拼</view>
										</view>
									</view>
								</view>
							</view>
						</swiper-item>
					</swiper>
				</view> -->
				<!-- end中奖信息 -->
				<!-- 即将成团  -->
				<view class="jijianchengtuan">
					<view class="chengtuan-tips" @click="$Router.pushTab('/pages/hot-group/hot-group')">
						<view class="left-chengtuan">
							<image src="../../static/images/index/hot.png" style="width: 34upx; height: 43upx;"></image>
							<text class="title">即将成团</text>
							<!-- <text class="tips">拼团新玩法，商品更实惠</text> -->
						</view>
						<view class="right-loding">
							<text @click="goPage('/pages/index/goods-detail/ruleImg/ruleImg')">玩法规则</text>
							<!-- <image style="width: 11upx; height: 19upx;" src="../../static/images/index/loding.png"></image> -->
						</view>
					</view>
			
					<view class="chengtuan-box">
						<view class="chengtuan-list">
							<view class="chengtuan-item" v-for="(item, index) in homeCollage" :key="index">
								<view class="goods-img">
									<image :src="item.has_one_goods.thumb"></image>
								</view>
								<!-- <view class="goods-detail">
								<view class="goods-name">华为Mate 40 Pro 4G麒麟曲面 智能手机 </view>
								<view class="tips" style="color: #FF5E24;">1人拿商品，4人全额退款</view>
								<view style="display: flex; align-items: center; margin-top: 3upx;">
									<u-line-progress style="height: 11upx; width: 326upx;" active-color="#FF4F10"
										:percent="70" :show-percent="false"></u-line-progress>
									<text style="font-size: 22upx; color: #E5E5E5; margin-left: 16upx;"> <text
											style="color: #FF5E24;">1 </text> /5</text>
								</view>
								<view class="price-box">
									<view class="price-left">¥199.00</view>
									<view><text style="color: #B2B2B2;">成团：
									</text>268 
									<text style="color: #B2B2B2;">次</text>
									</view>
								</view>
							</view> -->
								<view class="goods-detail">
									<view class="goods-name text-line2">{{item.title}} </view>
									<view class="tips" style="color: #FF5E24;">
										{{item.fight_describe}}
									</view>
									<view style="display: flex; align-items: center; margin-top: 3upx;">
										<!-- <u-line-progress style="height: 11upx; width: 326upx;" active-color="#FF4F10"
										:percent="(item.ba_team.has_many_success_member_count/ item.has_many_option_levels[0]['member_num']) * 100"
										:show-percent="false"></u-line-progress> -->
										<view style="flex: 1;">
											<u-line-progress height="10" style="height: 11upx; width: 326upx;"
												active-color="#FF4F10"
												:percent="(item.ba_team.has_many_success_member_count/ item.has_many_option_levels[0]['member_num']) * 100"
												:show-percent="false"></u-line-progress>
										</view>
										<view
											style="font-size: 22upx; color: #E5E5E5; margin-left: 16upx; padding-top: 15upx;">
											<text style="color: #FF5E24;">{{item.ba_team.has_many_success_member_count}}
											</text>
											/{{item.has_many_option_levels[0]['member_num']}}
										</view>
									</view>
									<view class="price-box">
										<view class="price-left">¥{{item.has_many_option_levels[0]['group_price']}}</view>
										<view><text style="color: #B2B2B2;">成团：</text>{{item.has_many_team_count}}次</view>
									</view>
								</view>
								<view class="right-box"
									@click="junit('/pages/index/goods-detail/goods-detail', {id: item.fight_id});">
									<image class="tips-image" src="../../static/images/tabbar/hot-group-select.png"></image>
									<view style="margin-top: 19upx; font-size: 16upx; color: #FFFFFF;">拼后领补贴</view>
									<view style="font-size: 16upx; color: #FFFFFF;">
										{{item.ba_team.has_many_success_member_count}}人已领取
									</view>
									<view class="right-box-footer">
										<text>马上拼</text>
										<image src="../../static/images/index/loding.png"
											style="width: 10upx; height: 18upx;">
										</image>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<!-- end即将成团 -->
				<!-- 登录提示 -->
				
			<!-- </mescroll-body> -->
		</view>
	</view>
</template>

<script>
	// import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	export default {
		// mixins: [MescrollMixin],
		// mixins: [MescrollMixin, MescrollMoreItemMixin],
		data() {
			return {
				statusBarHeight: 0,
				titleBarHeight: 0,
				upOption: {
					page: {
						size: 5 // 每页数据的数量,默认10
					},
					noMoreSize: 10, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
					auto: false
				},
				// params:{
				// 	limit:5,
				// 	page:1,
				// 	type:10
				// },
				downOption: {
					auto: true
				},
				keyword: '',
				swiperlist: [], // 轮播图列表
				fightGroups: [], // 新人拼团
				homeCollage: [], // 成团列表
				shoaaction: false,
				keyword: '',
			}
		},
		onLoad() {
			// this.init();
			const SystemInfo = wx.getSystemInfoSync();
			this.statusBarHeight = SystemInfo.statusBarHeight;
			this.init();
		},
		onReady() {
			this.titleBarHeight = (uni.getMenuButtonBoundingClientRect().top - this.statusBarHeight) * 2 +
				uni.getMenuButtonBoundingClientRect().height;
		},
		onShow() {

		},
		methods: {
			shoaactionChoose(){
				
				this.shoaaction = !this.shoaaction;
			},
			
			junit(url, query = {}) {
				this.$Router.push({
					path: url,
					query: query
				});
			},
			init() {
				this.getswiperlist();
				this.getfightGroups();
				this.getfightGroupsHome();
			},
			// 获取轮播图数据
			getswiperlist() {
				// this.myHttp({
				// 	url:'/addons/yun_shop/api.php',
				// 	data:{
				// 		route : 'test.headImg',
				// 		// is_lb : 1, //兑换商城
				// 	}
				// }).then((res)=>{
				// 	if(res.result== '1'){
				// 		this.swiperArr = res.data
				// 		console.log(111);
				// 		console.log(this.swiperArr);
				// 	}
				// })
				this.$http.get('index.homePagWxapp').then(res => {
					this.swiperlist = res.data
					console.log(this.swiperlist);
				})
				// 请求示例    url , 所需参数, 项目配置
				// this.$http.get('/addons/yun_shop/api.php?i=4&type=2&route=test.sliads&ingress=weChatApplet&validate_page=1&app_type=wechat',{}, {'paramsType': 2}).then(res => {
				
				// 	this.swiperlist = res.data
				// })
			},
			// 新人拼团数据
			getfightGroups() {
				this.$http.get('index.fightGroupsRecommendFight').then(res => {
					this.fightGroups = res.data;
				})
			},
			
			// 即将成团数据
			getfightGroupsHome() {
				this.$http.get('index.fightGroupsHomeCollage', {
					i: 4,
					uuid: 0,
					type: 5,
					basic_info: 1,
					validate_page: 1,
					route: "test.homeCollage",
					page: 1,
					keyword: this.keyword,
				}).then(res => {
					this.homeCollage = res.data.data;
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import './index.scss';
	.video{
		width: 100%;
		display: flex;
		justify-content: center;
		margin-bottom: 20rpx;
	}
	
	.page-status {
		color: #FFFFFF;

		width: 100%;
		display: flex;
		font-weight: bold;
		padding: 30upx 0upx;
		box-sizing: border-box;
		align-items: center;
		justify-content: space-between;
		font-size: 31upx;
	}

	.tabArr{
        width:  700upx; 
		margin: 20rpx auto;
		display: flex;
		font-size: 34rpx;
		display: flex;
		.tabItem{
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			image{
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
			}
			text{
				margin-top: 10rpx;
			}
			
		}
		
	}
	


</style>
